import React, { Component, PropTypes } from 'react';
import { FiveHealthHabitButtons, Scroll } from '../common-ui-parts';
import HeadLine, { HEAD_LINE_COLOR } from '../common-ui-parts/HeadLine';
import CommonConstants from '../../constants/CommonConstants';

/**
 * アドバイス：5つの健康習慣
 */
class Advice extends Component {
  scrollTop() {
    this.refs.scrollArea.scrollTop();
  }

  render() {
    const { message, okSmoking, okAlcohol, okBmi, okActivity, okSalineFood, count } = this.props;
    return (
      <div className="Advice">
        <Scroll
          ref="scrollArea"
          fixedHeight={CommonConstants.SCROLL_FIXED_HIGHT.ADVICE}
          customStyle={CommonConstants.SCROLL_Z}
        >
          <div className="report-card">
            <div className="card-content">
              <HeadLine
                level={2}
                color={HEAD_LINE_COLOR.BLUE}
              >
                あなたへのアドバイス
              </HeadLine>
              <div className="show-five-helth-habit" >
                <h4 className="count-title" >
                  あなたは<span className="count">{count}個</span>実践中
                </h4>
                <FiveHealthHabitButtons
                  readonly={true}
                  markValue={{
                    okSmoking,
                    okAlcohol,
                    okBmi,
                    okActivity,
                    okSalineFood,
                  }}
                />
              </div>
              <p dangerouslySetInnerHTML={{__html: message}} />
              <p>
                これまで続けてきた習慣を変え、それを新たな習慣として定着させるためには、根気と努力が必要です。
                まずは、現在の自分の問題点を明らかにし、その中で取りかかりやすいところから生活習慣の見直しをすることが大切です。
                {/* コメントアウト理由：東京海上では、５つの習慣について説明していないので削除する。*/}
                {/*ここまでのページで紹介した5つの習慣のなかから取り入れやすいものから始めてみましょう。 */}
                下のポイントのうち、取り入れやすいものから始めてみましょう。
                なお、これまでの習慣を改善しても効果が現れるのには時間がかかります。
                また、これまでの習慣の影響が完全に除かれない場合もあります。
                ここで挙げた５つの健康習慣は、日本人の研究を精査した中から生まれた、
                日本人に適したがん予防指針「日本人のためのがん予防法」でも取り上げられています。
                がん予防のための健康習慣は意外にシンプルで身近なもの。これをきっかけに、ご自分の生活習慣を見直してみませんか？
              </p>
              <dl className="link">
                <dt className="link-title">日本人のためのがん予防法</dt>
                <dd className="link-dd">
                  <ul className="link-ul">
                    <li className="link-li"><a href="http://epi.ncc.go.jp/can_prev/" className="external-link" rel="external" target="_blank">研究者向け・医療従事者向け</a></li>
                    <li className="link-li"><a href="http://ganjoho.jp/public/pre_scr/prevention/evidence_based.html#prg4_1" className="external-link" rel="external" target="_blank">一般の方向け</a></li>
                  </ul>
                </dd>
                <dt className="link-title">がんに関する情報全般</dt>
                <dd className="link-dd">
                  <ul className="link-ul">
                    <li className="link-li"><a href="http://ganjoho.jp/public/index.html" className="external-link" rel="external" target="_blank">研究者向け・医療従事者向け</a></li>
                  </ul>
                </dd>
              </dl>
            </div>
          </div>
        </Scroll>
      </div>
    );
  }
}

/*Advice.propTypes = {
  okSmoking: PropTypes.bool.isRequired,
  okAlcohol: PropTypes.bool.isRequired,
  okBmi: PropTypes.bool.isRequired,
  okActivity: PropTypes.bool.isRequired,
  okSalineFood: PropTypes.bool.isRequired,
  count: PropTypes.number.isRequired,
  message: PropTypes.string,
};*/

export default Advice
